import { Input, Table, Space, Popconfirm } from 'antd'
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import './App.css'

const { Search } = Input


function App () {
  // useState 为函数组件提供状态
  const [list, setList] = useState([])
  // 获取列表
  const loadList = async () => {
    const res = await axios.get('http://localhost:3001/data')
    setList(res.data)
  }
  // useEffect 函数副作用
  useEffect(() => {
    loadList()
  }, [])

  // 删除
  const del = async (id) => {
    await axios.delete(`http://localhost:3001/data/${id}`)
    loadList()
  }

  // 搜索
  const onSearch = async (value) => {
    const res = await axios.get(`http://localhost:3001/data/?q=${value}`)
    setList(res.data)
  }

  const columns = [
    {
      title: '任务编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '任务描述',
      dataIndex: 'des',
      key: 'des',
    },
    {
      title: '操作',
      dataIndex: 'do',
      key: 'do',
      render: (text, record) => (
        <Space size="middle">
          <Popconfirm title="确定要删除吗?"
            onConfirm={() => del(record.id)}>
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div className="container">
      <div className="search-box">
        <Search
          placeholder="请输入关键词"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
        />
      </div>
      <Table bordered
        dataSource={list}
        columns={columns}
        rowKey={(record) => record.id}
        pagination={false} />
    </div>
  )
}

export default App
